<template>
  <div class="chat-container">
    <!-- 消息展示区 -->
    <div class="message-list">
      <MessageBubble
        v-for="msg in chatStore.messages"
        :key="msg.id"
        :content="msg.content"
        :role="msg.role"
      />
    </div>
    <!-- 输入区 -->
    <div class="chat-input">
      <a-input
        v-model:value="input"
        @pressEnter="handleSend"
        placeholder="请输入内容，回车发送"
        allow-clear
      />
      <a-button type="primary" @click="handleSend">发送</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useChatStore } from '../store/chat'
import MessageBubble from '@/components/Chat/MessageBubble.vue'

const input = ref('')
const chatStore = useChatStore()

function handleSend() {
  if (!input.value.trim()) return
  chatStore.addMessage({
    id: Date.now().toString(),
    role: 'user',
    content: input.value
  })
  // 这里后续会调用AI接口并添加AI回复
  input.value = ''
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
}
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f5f7fa;
}
.chat-input {
  display: flex;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}
</style> 